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31 Pengertian HTML 


HTML (HyperText Markup Language) merupakan protocol yang 
digunakan untuk mentransfer data atau dokumen dari web server ke 
dalam browser. HTML juga digunakan untuk membangun halaman 
WEB. Sekalipun banyak orang yang menyebutnya sebagai bahasa 
pemrograman, HTML sebenarnya sama sekali bukan bahasa 
pemrograman. Hal ini terlihat dari namanya, HTML merupakan suatu 
bahasa Markup, yang digunakan untuk melakukan mark-up 
(penandaan) terhadap sebuah dokumen teks. Tanda tersebut 
digunakan untuk menentukan format atau style dari teks yang 
ditandai. 


Pada masa sekarang ini HTML merupakan interface standar internet. 
Halaman-halaman HTML ini bisa mengandung animasi, suara, video, 
bahkan sampai program interaktif yang kompleks. Jutaan halaman 
HTML setiap hari diakses dari server-server WEB di seluruh dunia. 


Struktur dokumen-dokumen HTML sebenarnya hanya berupa file 
teks biasa yang dilengkapi dengan tanda-tanda khusus (tag) yang 
menentukan bagaimana teks tersebut ditampilkan. Karena itu, 
dokumen HTML dapat dibuat menggunakan teks editor sederhana 
seperti Notepad, Editplus, vi, dan sebagainya. 


Namun sekarang ini telah banyak visual editor untuk HTML seperti 
Microsoft Front Page, Macromedia Dreamweaver, Adobe GoLive, dan 
lain-lain. Tag HTML biasanya tag-tag yang berpasangan dan ditandai 
dengan simbol « dan », sedangkan “pasangan” atau akhir perintah 
dari sebuah tag ditandai dengan tanda “/', misalnya pasangan dari 
«tag» adalah «/tag». 


Dokumen HTML biasanya disimpan dengan extension .HTM atau 
HTML. Untuk membuka dokumen HTML ini diperlukan sebuah Web 
Browser. Contoh web browser yang banyak dipakai adalah: Microsoft 
Internet Explorer, Netscape Navigator, Mozilla Firefox, dan 
sebagainya. 


Sebagai contoh perhatikan kode HTML sederhana di bawah ini: 


« HTML » 
SHEAD25 
STITLE»Judul Pada Title Bar Browsers/ TITLE » 
« /HEAD» 

SBODY2- 

«Hl»Halloo Apa Kabar«/Hl» 


Saya sedang belajar HTML, mohon bantuannya. 


«/ BODY- 
«/ HTML » 


1. Anda bisa mencoba dengan menuliskan pada program 
Notepad kemudian simpan dengan ekstensi HTML. 


betayar tot - Metepad 


bat Format View Melp 


Er Judul Pada Title Bar Browser «/ TITLE 


«H1» Hal Apa Kabar«/H1» 


Saya sedang belajar HTML, mohon bantuannya | 


k— 


Gambar 3.1 Tulisan HTML dengan Notepad 
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2. Ingat, saat menyimpan pada Notepad, arahkan Save as type 
pada posisi All Files. Kemudian beri nama dengan extension 
.html. Contoh “belajar.html”. 


Gambar 3.2 Menyimpan file Notepad dalam html 


3. Buka lokasi penyimpanan file, dan jalankan file yang sudah 
Anda buat dengan format HTML. File tersebut akan terbuka 
dalam browser default komputer Anda. 


Gambar 3.3 File html 


Judul (Title) 


@buaui Pada Title Bar Browser - Flock) 


File Edit View History Favourites Tools Help 

aa) & & 3) | | (LAM #te:11/1/Documents ana Setting 
O LGDG #TO/ & “dlMonVutes Gishueroa 
(Halloo Apa Kabar: 


(Saya sedang belajar HTML, mohon bantuannya. Anda Bisa..?) 


Judul (Head) Isi (Body) 
Gambar 3.4 Struktur html 


Kode di atas hanya cara untuk membuat halaman dengan kode 
HTML secara sederhana. Banyak hal yang perlu Anda pahami lebih 
lanjut jika ingin benar-benar mempelajari fungsi dan pengkodean 
dalam HTML. Beberapa alamat yang bisa Anda coba sebagai sarana 
belajar online, antara lain: 


1. http://www.htmlcodetutorial.com/ 


2. http://www.ilmuwebsite.com/ 


3. http://web-source.net/ 


Selain alamat yang sudah disebutkan tadi, masih banyak blog atau 
situs komersil yang membahas tuntas tentang pembelajaran HTML. 


3 Pengertian XML 


Konsep serta cara kerja HTML di atas dipakai serta digunakan 
pembuat blog hingga sekarang meski sudah muncul satu ekstensi 
baru, yaitu XML, namun HTML tetap menjadi opsi dan pilihan paling 
utama. 


Sedangkan XML yang dipakai blogger generasi terbaru merupakan 
singkatan dari Extensible Markup Language, merupakan bahasa 
pemrograman yang menyerupai HTML, dan didesain untuk 
menggambarkan data. 
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Meski sama-sama dasar dari tampilan web atau situs, fungsi XML 
lebih untuk menggambarkan data dan memfokuskan pada data, 
sedangkan HTML untuk menampilkan data dan bagaimana 
tampilannya. Dengan kata lain, HTML untuk menampilkan informasi, 


sedangkan XML untuk menggambarkan informasi. 


Meskipun saat melakukan pengaturan halaman blog, baik itu 
pewarnaan posisi gadget maupun template, Anda tidak mengetahui 
tentang pengkodean HTML atau XML yang terintegrasikan pada blog 
Anda, namun pada halaman Edit HTML ini sudah terdapat kode 
XML. Kode tersebut bervariasi tergantung dari pengaturan yang 


sudah Anda lakukan. 


(wp-polaroid- 
| blogger.xmi 


Gambar 3.5 File xml 


Di bawah ini terdapat contoh kode XML. 


TYPE html» 
b:version 
http://ww 
atas'http 
"http: 


's 005/gml/b' 
ns:d 
meta contents'I 'X-UA-Compatible'/» 
€b:if conds'data 


(meta contents ial-scale-1.0,minimum- 


scalez1.0,maximum-sca .0' names'viewport"'/D 
Kb:else/? 
(meta content-'width-1100' name-'viewport"/D 
b:ifd 
€b:include data-"'blog' name-'all-head-content'/? 
€title?»tdata:blog.pageTitle/»x«/titler 


(meta expr:contents'data:blog.metaDescription'! namer'description'/D 


€b:iskin?«! (CDATA(/“ 


Gambar 3.6 Kode XML pada Blog 


Pada bagian tersebut juga memuat informasi sang pembuat dan 


keterangan lainnya. 
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Blogger Template Style 


Name: Simple 
Designer: Josh Peterson 
URL: www.noaesthetic.com 


Gambar 3.7 Kode keterangan pembuat 


Pada halaman Edit HTML ini, Blogger memberikan Anda link untuk 
mempelajari lebih lanjut kode HTML, tetapi masih menggunakan 
bahasa Inggris. Gunakan link Learn More (Info Lengkap) untuk 
masuk ke halaman tutorial HTML Blogger. 


Edit Template 


Edit the contents of your template. Learn more 


k?xml version-"1.0" encoding-"UTF-8" ?» 


€!DOCTYPE html 

€html b:version-'2' class-'v2' expr:dir-'data:b 

xmlns-'http://www.w3.org/1999/xhtml' xmlns:b-'h 

xmlns:data-'http://www.google.com/2005/gml/data 

xmlns:expr-'http://www.google.com/2005/gml/expr 
Shead? 


meta content—-!' TE-sFEmulateTE7! httn-enmiu—!'X: 


Gambar 3.8 Link bantuan pembelajaran kode 


Blogger juga menyediakan backup template yang Anda gunakan, 
pilih link Download Full Template (Download Template Lengkap). 


Backup/Restore Template 


Before editing your template, you may want to save a copy of it. Download Full Template 


Gambar 3.9 Link backup template 


Setelah muncul jendela konfirmasi download, simpan file tersebut 
pada media komputer lokal. 
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Opening template-9106192638198839437.xml 


You have chosen to open 


(2) template-9106192638198839487.xmi 
which is a: XML Document 
from: http://Awww.blogger.com 


What should Flock do with this file? 


@ Openwith | XML Editor (default) - 


@O Save File 


Do this automatically for files like this from now on. 


Gambar 3.10 Konfirmasi download 


Buka lokasi penyimpanan file download tersebut sehingga akan ada 
satu file XML. Untuk membaca file tersebut, Anda bisa gunakan 
aplikasi yang paling ringan, yaitu program Notepad, Anda juga bisa 
menggunakan program FrontPage atau Dreamweaver. 


Gambar 3.11 File dengan ekstensi XML 


Berikut ilustrasi membuka file XML menggunakan program Notepad. 


@ 
i 1 Open 
61926 Edit 
3946 7-Zip » 
Open with » 23 xmi Editor 
. Scan with Panda Cloud Antivirus KE, Microsoft Office InfoPath 2007 
Add to archive... 
Notepad 
WB Add to "template-9106192638196839437.rar" 2 Internet Explorer 
Bcompress and email... @ na 
0 


Bcompress to "tempiate-9106192638196839487.rar” and email 


Create Checksum File... & Microsoft Office Word 


Send To » Choose Program... 


Gambar 3.12 Membuka file XML dengan Notepad 


Berbeda dengan file HTML yang bisa dilihat sempurna dengan 
program Notepad, pada XML beberapa komponen tidak bisa terbaca 
dengan jelas. Hal ini karena pengkodean yang tidak mendukung 
untuk Notepad, sehingga Anda harus menggunakan aplikasi lain. 


Backup template ini bisa Anda gunakan untuk mengembalikan 
template jika suatu saat template yang Anda gunakan rusak atau 
salah dalam pengeditan. 


ID cate Blog,txt - Notepad (RK) 
File Edit Format View Help 
Ik IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 
"http://www.w3.org/TR/xhtml1/DTD/xhtmlll -transitional.dtd” 3 
«html» 3 
«head» 
«title» « $BlogPageTitle$ » «/title» 
« $BlogMetaData$» 
«style type-"text/css” » 
(On-nonanananananananan Name: 3 Columns Cafe Blog Designer: j.aghili URL: 
www.finalsense.com date: oct 2006 ---------------------- "/ 


body( — background : #fff 
url('http://photos1.blogger.com/blogger/3921/4104/1600/ab4.jpg") repeat-x fixed top : 
margin: Oprcpadding: Opx, color: #333333: font-size: 12px font-family: verdana, Arial, | 
Helvetica, sans-serif: text-align: center: ) 

#cl (border: 1px solid #999: margin: 40px auto: padding: 10px: text-alignileft: 
background: #000: width: 900px:) 

#c2(padding: Spx, border-bottom:1px solid #ccc ) 


P-ananamaaaaaaaman Replace Your Banner Address -----------------..oon "/ 
#banner (background : #090402 | 
uri('http://photos1.blogger.com/blogger/3921/4104/1600/ac401.jpg') no-repeat right: 

padding: 10px: margin-bottom: 10px, border: 1px solid #999: height 183px) 
#content (padding: 10px, margin: 10px 235px, border: 1px solid #999: | 
background : #cdb788 


Gambar 3.13 Contoh isi file pada Notepad 


Anda bisa menerapkan template yang telah disimpan. 


Seperti pada pemasangan template, gunakan tombol Browse untuk 
mencari lokasi penyimpanan file tersebut. Kemudian klik Upload 
(Unggah) untuk menerapkannya. 


Adakalanya ketika menggunakan template baru dari Blogger, sang 
pemilik blog merasa tidak suka, dan halaman ini juga telah 
menyediakan link untuk mengembalikannya serta Anda dapat 
memilih halaman klasik dengan basisi HTML. 
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Classic Templates 
Revert to Classic Template | View Classic Template 


Gambar 3.14 Link template klasik 


Perbedaan yang terlihat antara kode XML dan HTML pada blog 
adalah bagian pembuka dari kode tersebut. 


K?xml version-"1.0" encoding-"UTF-8" 2?» 
€!DOCTYPE html» 


(html b:versionz'2' class-'v2' expr:dir-s'data:blog.languageDirection' 


xmlns-'http://www.w3.org/1999/xhtml!' xmlns:b-'http://www.google.com/2 
xmlns:data-'http://www.google.com/2005/gml/data'" 


k IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ) 


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”» 
chtmi- 


«head» 
«title» « $BlogPageTitle$» «/title» 
« $BlogMetaData$» 


Gambar 3.15 Perbedaan kode XML dan HTML 


Dengan perbedaan ini, Anda tidak bisa menggunakan file berformat 
HTML jika pada pengaturan Blogger masih menganut sistem XML. 
Untuk itu gunakan link Revert to Classic Template (Kembali ke 
Template Klasik). Pada jendela konfirmasi yang tampil, pilih tombol 
OK untuk melanjutkan proses. 


The page at www.blogger.com says: 


If you revert to your Classic template, you will still be able to 
recover your current design. Click OK to revert. 


Gambar 3.16 Konfirmasi Blogger 


Setelah proses selesai, halaman Edit HTML pada blog akan menjadi 
klasik, dan tanpa komponen untuk melakukan upload file template. 
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Edit HTML | Pick Cassk Template | Customise Design 


Settings Were Saved Successfully 


Change the Blogger Bue - 
NavBar 


Gambar 3.17 Halaman html klasik 


Karena setting template sudah diganti, gunakan link Pick Classic 
Template untuk memilih desain halaman blog. 


Edit HTML Pick Classic Template Customise Desian 


Minima Minima Black Minima Blue 


reated By: Blogger cated By: Blogge eated By: Blogge 


Gambar 3.18 Pilihan template klasik 
Tombol Use This Template (Gunakan Template Ini) merupakan 
navigasi untuk mengaplikasikan template yang Anda pilih ke blog. 


Jika pada pojok kanan bawah terdapat ikon kecil view, maka Anda 


dapat mengklik ikon tersebut untuk melihat secara detail template 
tersebut. 


Minima Blue 
Created By: Blogger 


Use This Template 


Gambar 3.19 Navigasi view template 


Saat mengganti dengan template klasik pun, Anda akan dihadapkan 
pada jendela konfirmasi kembali untuk memastikan apakah Anda 
benar-benar dan yakin akan menggunakan template yang sudah 
Anda pilih. Tekan tombol OK untuk melanjutkan proses. 


The page at www.blogger.com says: 


Warning: Your current template will be replaced and any 
customisations that you've made will be lost. Do you wish to 
continue? 


Gambar 3.20 Konfirmasi perubahan template 


Link Customise Design digunakan untuk meng-upgrade template 
yang Anda gunakan ke format XML. 
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Edit HTML Pick Classic Template Customise Design 


Give your blog a whole new look! 


We have introduced a new tool for customising the appearance of your blog. 
Before you can use this tool, you will need to upgrade your template. 


By upgrading, you will lose many of the changes that you previously made to 
your template. However, we will save a copy of your current template so 


that you can access it later. 


Learn more about Blogger Template Designer 


UPGRADE YOUR TEMPLATE 


Gambar 3.21 Halaman upgrade template 


Setelah Anda memilih tombol Upgrade Your Template, pilih 
template baru sesuai dengan yang dikehendaki dan pilih Save 
Template (Simpan Template) untuk melanjutkan proses. 


Choose a starter template 
You can change your template later, and even customise it with the Template Designer. 


«(FS 


Simple Picture Window Awesome Inc 


| | 


Watermark Ethereal Travel Simple 


SAVE TEMPLATE 


Gambar 3.22 Jenis template 


Selesai mengatur dan memilih template, pada tahap akhir Anda 
akan masuk ke halaman Page Element (Elemen Halaman). 
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Upgrade compieted. You can view your biar Or ac.c.e1s your Old template. 


Add and Arrai P: Elements 
mob endogah kena. rebo. sera | prevew | cacar eorts | save | 
Do Favican Edit 
Trattc Travis Review (Header) aa 
| RSS Subscribe san! 
| Heoder-Text.Box Lot sa! 
| Header Text. Box Raghit Sa 
Add a Gackoet 
Blog Posts Add a Gadaot 
125x125 Ad Spots ' 
Ea 
About Me 
pa aa 
Followers 
Pa aa aa 
| PICKrRSS 
— Pa ee 


Gambar 3.23 Tahap akhir upgrade template 


AS 


21 


